<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频播放器 - 天津大学《计算机网络》课程</title>
    <link rel="stylesheet" href="video-styles.css">
</head>
<body>
    <!-- 顶部工具栏 -->
    <header class="toolbar">
        <div class="toolbar-left">
            <button id="backBtn" class="tool-btn">← 返回</button>
            <h1 id="videoTitle">视频播放器</h1>
        </div>
        
        <div class="toolbar-center">
            <button id="prevVideo" class="tool-btn">上一个</button>
            <button id="nextVideo" class="tool-btn">下一个</button>
            <span id="videoInfo">第 <span id="currentVideo">1</span> 个，共 <span id="totalVideos">1</span> 个</span>
        </div>
        
        <div class="toolbar-right">
            <button id="settings" class="tool-btn">设置</button>
            <button id="playlistBtn" class="tool-btn">播放列表</button>
            <button id="fullscreen" class="tool-btn">全屏</button>
        </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="main-content">
        <!-- 左侧播放列表 -->
        <aside class="playlist-panel" id="playlistPanel">
            <div class="panel-header">
                <h3>播放列表</h3>
                <button id="closePlaylist" class="close-btn">&times;</button>
            </div>
            
            <div class="playlist-content" id="playlistContent">
                <!-- 播放列表将通过JavaScript动态生成 -->
            </div>
        </aside>

        <!-- 中间视频播放区域 -->
        <section class="video-container">
            <div class="video-player" id="videoPlayer">
                <video id="videoElement" controls>
                    <source src="" type="video/mp4">
                    您的浏览器不支持视频播放。
                </video>
                
                <!-- 自定义控制器已禁用 -->
                <div class="custom-controls" id="customControls" style="display: none;">
                    <div class="progress-bar">
                        <div class="progress-fill" id="progressFill"></div>
                        <div class="progress-handle" id="progressHandle"></div>
                    </div>
                    
                    <div class="controls-bottom">
                        <div class="controls-left">
                            <button id="playPause" class="control-btn">▶</button>
                            <button id="rewind" class="control-btn">⏪</button>
                            <button id="fastForward" class="control-btn">⏩</button>
                        </div>
                        
                        <div class="controls-center">
                            <span id="currentTime">00:00</span>
                            <span>/</span>
                            <span id="totalTime">00:00</span>
                        </div>
                        
                        <div class="controls-right">
                            <button id="volumeBtn" class="control-btn">🔊</button>
                            <div class="volume-slider" id="volumeSlider">
                                <div class="volume-fill" id="volumeFill"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 加载指示器 -->
                <div id="loadingIndicator" class="loading">
                    <div class="spinner"></div>
                    <p>正在加载视频...</p>
                </div>
                
                <!-- 错误提示 -->
                <div id="errorMessage" class="error-message" style="display: none;">
                    <p>无法加载视频文件</p>
                    <button onclick="location.reload()">重试</button>
                </div>
            </div>
            
            <!-- 视频信息 -->
            <div class="video-info-panel">
                <div class="video-details">
                    <h2 id="videoName">视频标题</h2>
                    <p id="videoDescription">视频描述</p>
                    <div class="video-meta">
                        <span id="videoDuration">时长: 00:00</span>
                        <span id="videoSize">大小: 0 MB</span>
                        <span id="videoFormat">格式: MP4</span>
                    </div>
                </div>
                
                <!-- 章节导航 -->
                <div class="chapter-navigation">
                    <h3>章节导航</h3>
                    <div class="chapter-list" id="chapterList">
                        <!-- 章节列表将通过JavaScript动态生成 -->
                    </div>
                </div>
            </div>
        </section>


    </main>



    <!-- 设置面板 -->
    <div id="settingsPanel" class="settings-panel">
        <div class="settings-content">
            <h3>播放设置</h3>
            
            <div class="setting-group">
                <label>播放速度:</label>
                <select id="playbackSpeed">
                    <option value="0.5">0.5x</option>
                    <option value="0.75">0.75x</option>
                    <option value="1" selected>1x</option>
                    <option value="1.25">1.25x</option>
                    <option value="1.5">1.5x</option>
                    <option value="2">2x</option>
                </select>
            </div>
            
            <div class="setting-group">
                <label>画质:</label>
                <select id="videoQuality">
                    <option value="auto" selected>自动</option>
                    <option value="720p">720p</option>
                    <option value="480p">480p</option>
                    <option value="360p">360p</option>
                </select>
            </div>
            
            <div class="setting-group">
                <label>字幕:</label>
                <select id="subtitles">
                    <option value="off" selected>关闭</option>
                    <option value="on">开启</option>
                </select>
            </div>
            
            <button id="closeSettings" class="close-btn">关闭</button>
        </div>
    </div>

    <script src="video.js?v=2.0"></script>
</body>
</html>
